<template>
  <div :class="className">
    <div class="eva__loading__circle eva__loading__circle1"></div>
    <div class="eva__loading__circle eva__loading__circle2"></div>
    <div class="eva__loading__circle eva__loading__circle3"></div>
  </div>
</template>

<script>
export default {
  props: {
    theme: {
      type: String,
      default: 'light'
    }
  },
  computed: {
    className () {
      return `eva__loading eva__loading--${this.theme}`
    }
  }
}
</script>

<style lang="scss" scoped>
@mixin appearKeyFrams($step) {
  $start: $step * 25 - 1;
  $keyframesName: appear-#{$step};
  animation: $keyframesName 1s linear infinite;

  @keyframes #{$keyframesName} {
    0% {
      opacity: 0;
    }
    #{$start * 1}% {
      opacity: 0;
    }
    #{$start * 1 + 1}% {
      opacity: 1;
    }
    100% {
      opacity: 0;
    }
  }
}

.eva__loading {
  display: flex;
  height: 20px;
  align-items: center;
  &__circle {
    height: 5px;
    width: 5px;
    border-radius: 50%;
    background: $color-white;
    margin-right: 4px;
    opacity: 0;
  }
  &__circle1 {
    @include appearKeyFrams(1);
  }
  &__circle2 {
    @include appearKeyFrams(2);
  }
  &__circle3 {
    @include appearKeyFrams(3);
  }
}
.eva__loading--dark {
  .eva__loading__circle {
    background: $color-black;
  }
}
.eva__loading--primary {
  .eva__loading__circle {
    background: $color-primary;
  }
}
</style>
